<template>
    <div style="margin: 10px;padding: 10px; width: 100%;background-color: #FFF;border-radius: 10px;" class="container">
      <!-- <div class="search">
          <el-input v-model="vagename" placeholder="输入品种名称" style="width: 20% !important;"></el-input>
          <el-button type="primary" icon="el-icon-search" id="search" style="margin-left: 5px;">搜索</el-button>
      </div> -->

      <div class="box" style="padding: 10px;">
        <el-row>
            <el-col :span="2">
              <el-tabs :tab-position="tabPosition" @tab-click="handleClick">
                 <el-tab-pane v-for="item in formdata" :label="item.vegetables" :vageId="item.vegetablesId"> 
                 </el-tab-pane>
              </el-tabs>
            </el-col>

            <el-col :span="18">
              <div class="box-body" v-for="item in formdata" :id="`box`+item.vegetablesId" style="display: none;">
                  <h3 style="color: #409EFF;">预览</h3>
                     <el-image v-for="imgs in item.imglist" :src="imgs" ref="preview" :preview-src-list="item.imglist" style="height: 30vh; margin: 5px;cursor: pointer;"></el-image>
                     <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        
                      <el-form-item label="下单数量" prop="orderNum">
                          <el-input v-model="form.orderNum" type="number" style="width: 50%;"></el-input>
                      </el-form-item>
        
                      <el-form-item label="包装方式" prop="packing">
                        <el-radio-group v-model="form.packing" size="medium" >
                          <el-radio label="袋装" @change="bzChange(item.baggedPrice,item.baggedWeight,0)" ></el-radio>
                          <el-radio label="箱装" @change="bzChange(item.cartonPrice,item.cartonWeight,1)" ></el-radio>
                        </el-radio-group>
                      </el-form-item>
        
                      <!-- <el-form-item label="备注 :">
                        <el-input type="textarea" v-model="form.remark" style="width: 50%;"></el-input>
                      </el-form-item> -->
        
                      <div class="price">
                        <p style="color: #F56C6C;">净重：{{ weight }}</p>
                        <p style="color: #F56C6C;">单价：{{ price }}</p>
                     </div>
        
                     <div class="addbox" style="position: relative;">
                      <el-button type="primary" @click="sureorder(item.vegetablesId)">加入购物车</el-button>
                      <el-button type="primary" @click="createorder2(item.vegetablesId)">生成订单</el-button>
                      <div class="linner_ball" :id="`linner_ball`+item.vegetablesId">
                        <i class="el-icon-plus add">1</i>
                      </div>
                     </div>
                       
                     </el-form>
                </div>
            </el-col>
        </el-row>
        
        
      </div>
      
      <div class="card" v-if="shopcarnum==0">
        <i class="shopcar el-icon-shopping-cart-full"></i>
        <span class="money">
          <i>¥</i>
          <span style="color: #F56C6C;" v-if="shopcarnum==NAN"> 0</span>
          <span style="color: #F56C6C;" v-else> {{ totalprice }}</span>
        </span>
        <i class="downjt el-icon-caret-bottom"></i>
        <i class="upjt el-icon-caret-top"></i>
      </div>

      <div class="card cardis" v-else>
        <el-badge :value="shopcarnum" :max="99">
            <i class="shopcar shopcaris el-icon-shopping-cart-full"></i>
        </el-badge>
        <span class="money" style="top: -15px !important;">
          <i style="color: #F56C6C;">¥</i>
          <span style="color: #F56C6C;" v-if="shopcarnum==NAN"> 0</span>
          <span style="color: #F56C6C;" v-else> {{ totalprice}}</span>
        </span>
        <span class="weight">
          <i style="font-size: 30px;">|</i>
           预估重量：
           <span style="color: #F56C6C;" v-if="shopcarnum==NAN"> 0</span>
           <span style="color: #F56C6C;" v-else> {{ totalweight}}</span>
        </span>
        <span class="detail">
          <el-popover
          popper-class="shopcarmx" 
        placement="top"
        trigger="click"
      >
          <div v-for="item in this.getshopcardt" style="line-height: 35px;">
            <el-image :src="item.imglist[0]" ref="preview" :preview-src-list="item.imglist" style="width:20%; height: 100%; margin: 5px;cursor: pointer;"></el-image>
            <!-- <p class="vage">{{ item.vegetables }}</p>
            <p class="num">数量：{{ item.orderNum }}</p>
            <p class="packtype">包装方式：{{ item.packTypes }}</p>
            <p class="totalweight">总净重：{{ item.weight }}</p>
            <p class="totalweight">总净重：{{ item.weight }}</p>
            <p class="totalweight">总净重：{{ item.weight }}</p>
            <p class="moneyprice">¥ {{ item.price }}</p> -->
            <ul style="display: inline-block;">
              <li class="vage">{{ item.vegetables }}</li>
              <li class="num">数量：{{ item.orderNum }}</li>
              <li class="packtype">包装方式：{{ item.packTypes }}</li>
              <li class="totalweight">总净重：{{ item.weight }} <span style="font-size: 15px;color: #E6A23C;">单重: {{ item.unitWeight }}</span></li>
              <li class="moneyprice">¥ {{ item.price }}  <span style="font-size: 15px;color: #F56C6C;">单价：{{ item.unitPrice }}</span></li>
            </ul>
            <div class="adddelete">
              <span class="el-icon-remove" style="cursor: pointer;position: relative;top: 3px;" @click="deleteshopcar(item)"></span>
              <input :id="`addordernum`+item.shoppingCartId" style="width: 20%;border-radius: 20%;" value="1" type="number"></input>
              <span class="el-icon-circle-plus" style="color: #3a8ee6;cursor: pointer;position: relative;top: 3px;" @click="addshopcar(item)"></span>
            </div>
          </div>
         <span slot="reference">购物明细</span>
      </el-popover>
           
           <i class="downjt el-icon-arrow-down"></i>
           <i class="upjt el-icon-arrow-up"></i>
        </span>
        <!-- <el-button>生成订单</el-button> -->
      </div>
      <span class="sureorder" v-if="shopcarnum>0" @click="createOrder">生成订单</span>


      
    </div>
      
</template>   

<script>
import {getList} from "@/api/system/calssfl"; 
import {addOrder,addOrder2,addshopcar,getShopcar,updateshopcar,delteshopcar} from "@/api/system/purchase";
import {setStore, getStore} from '@/util/store'
import { formToJSON } from "axios";

// @before-enter="beforeEnter"
//                 @enter="enter"
//                 @after-enter="afterEnter"
export default{
    data(){
        return{
          getvaglist:{
            userId:parseInt(getStore({name: 'userInfo'}).userId),
            roleId:parseInt(getStore({name: 'userInfo'}).roleId)
          },
          shopcardata:{},
          getshopcardt:[],
          // addordernum:1,
          userId:getStore({name: 'userInfo'}).userId,
          userName:getStore({name: 'userInfo'}).userName,
          totalprice:0,
          totalweight:0,
          addshopcarform:{},
            shopcarnum:0,
            lastvageid:0,
            shopCarBall:false,
            shopCarBallEl:null,
            data:[],
            form:{orderNum:0},
            formdata:[],
            imglist:[],
            price:0,
            weight:0,
            tabPosition:"left",
            vagename:"",
            buytype:"",
            rules:{
              orderNum :[{required: true, message: '请输入', trigger: 'blur'}],
              packing :[{required: true, message: '请选择', trigger: 'blur'}],
            },
            option:{
              searchShow: true,
              searchMenuSpan: 6,
              tip: false,
              tree: true,
              border: true,
              selection: true,
              delBtn: false,
              editBtnText:"详情",
              addBtn:false,
              column:[
                {
                    label:"图片预览",
                    prop:"orderCode"
                    // value
                    // search:true
                },
              ]
            }
        }
    },
    created(){
      this.onload();
      this.getshopcarfun();
    }, 
    mounted(){
    },
    methods:{
      //生成订单
      createOrder(){
        this.shopcardata["userId"]=this.userId;
        this.shopcardata["orderName"]=this.userName;
        var arrid=[];
        for(var i=0;i<this.getshopcardt.length;i++){
           if(arrid.length==0){
               arrid.push(this.getshopcardt[i].vageId);
           }else{
               arrid.forEach(element=>{
                   if(element!=this.getshopcardt[i].vageId){
                    arrid.push(this.getshopcardt[i].vageId);
                   }
               })
           }
        }
        this.shopcardata["vageIds"]= JSON.stringify(arrid);
        this.shopcardata["price"]= this.totalprice;
        this.shopcardata["weight"]= this.totalweight;
        this.shopcardata["orderNum"]= this.shopcarnum;
        this.shopcardata["orderDetail"] = this.getshopcardt;
        this.shopcardata["istrue"] = 0;
        var strjson = JSON.stringify(this.shopcardata);
        addOrder(strjson).then(res=>{
          console.log(res);
           if(res.data.code==0){
            this.$message.error(res.data.msg);
           }else if(res.data.code==200){
            this.$message.success("成功");
             this.totalprice=0;
             this.totalweight=0;
             this.shopcarnum=0;
             this.getshopcardt=[];
             this.shopcardata=[];
           }
        })
      },
      //立即生成订单
      createorder2(){
         this.form["userId"]=getStore({name: 'userInfo'}).userId;
          this.form["orderName"]=getStore({name: 'userInfo'}).userName;
          if (this.form["orderNum"]==undefined || this.form["orderNum"]==0 || this.form["orderNum"]==null){
            this.$message.error("请填写有效数量");
            return;
          }
          if (this.form["packing"]==undefined || this.form["packing"]==null){
            this.$message.error("请选择包装方式");
            return;
          }
          this.form["weight"]=this.form.orderNum *this.weight;
          this.form["price"]=this.form.orderNum *this.price;
          this.form["istrue"]=1;
          var strjson2 = JSON.stringify(this.form);
          console.log(this.form);
          console.log(JSON.stringify(this.form));
          addOrder2(this.form).then(res=>{
           if(res.data.code==0){
            this.$message.error(res.data.msg);
           }else if(res.data.code==200){
            this.$message.success("成功");
           }
        })
      },
      deleteshopcar(item){
        var dom = document.getElementById("addordernum"+item.shoppingCartId);
        this.addshopcarform["addordernum"]=dom.value;
        if(dom.value>item.orderNum){
          this.$message.error("超出购物车数量值");
           return;
        }
        this.addshopcarform["vageId"]=item.vageId;
        this.addshopcarform["shoppingCartId"]=item.shoppingCartId;
        this.addshopcarform["packType"]=item.packType;
        this.addshopcarform["isdelete"]=0;
        delteshopcar(Object.assign(this.addshopcarform, this.query)).then(res=>{
            if(res.data.data.code==0){
              this.$message.error(res.data.data.data);   
            }else{
              if(dom.value==item.orderNum){
                var newdata=[];
                 this.getshopcardt.forEach(element=>{
                    if(element.shoppingCartId !=item.shoppingCartId){
                      newdata.push(element);
                    }
                 })
                 this.getshopcardt=newdata;
              }
            this.totalprice= this.totalprice-res.data.data.price;  //31
            this.totalweight= this.totalweight-res.data.data.weight;  //20
            item.price= item.price - res.data.data.price;  //16
            item.orderNum= item.orderNum - res.data.data.addordernum;  //1
            item.weight= item.weight - res.data.data.weight;  //20
            console.log(res.data.data.addordernum);
            this.shopcarnum= this.shopcarnum - res.data.data.addordernum;  //2
            }
        })
      },
      addshopcar(item){
        var dom = document.getElementById("addordernum"+item.shoppingCartId);
        this.addshopcarform["addordernum"]=dom.value;
        this.addshopcarform["vageId"]=item.vageId;
        this.addshopcarform["shoppingCartId"]=item.shoppingCartId;
        this.addshopcarform["packType"]=item.packType;
        updateshopcar(Object.assign(this.addshopcarform, this.query)).then(res=>{
            this.totalprice= (this.totalprice-item.price)+res.data.data.price;
            this.totalweight= (this.totalweight-item.weight)+res.data.data.weight;
            item.price=res.data.data.price;
            item.orderNum=res.data.data.orderNum;
            item.weight=res.data.data.weight;
            this.shopcarnum=this.shopcarnum + parseInt(dom.value);
        }) 
      },
      createorder(){

      },
      getshopcarfun(){
        getShopcar(getStore({name: 'userInfo'}).userId).then(res=>{
            this.getshopcardt=res.data;
            var money=0;
            var weight=0;
            var num=0;
            res.data.forEach(element => {
              money+=element.price;
              weight+=element.weight;
              num+=element.orderNum;
            });
            this.totalprice=money;
            this.totalweight=weight;
            this.shopcarnum = num;
        })
      },   
      handleKeyDown(event){
        console.log(event);
      }, 
       onload(){
        console.log(this.getvaglist);
         getList(null,null,Object.assign(this.getvaglist, this.query)).then(res=>{
          this.formdata=res.data.data.data;
          this.form["vageId"]=res.data.data.data[0].vegetablesId;
          this.lastvageid = res.data.data.data[0].vegetablesId;
         })
         },
         handleClick(event){
            this.form=[];
            var dom = document.getElementById(`box`+event.$attrs.vageId);
            var olddom = document.getElementById(`box`+this.lastvageid);
            dom.style="display:inline-block !important";
            if(olddom!=null){
              olddom.style="display:none !important";
            }
            this.lastvageid=event.$attrs.vageId;
            this.form["vageId"]=event.$attrs.vageId;
            this.weight=0;
            this.price=0;
         },
         bzChange(value,weight,type){
          this.form["packType"]=type
          this.price=value;
          this.weight=weight;
         },
         sureorder(vegetablesId){
          this.form["userId"]=getStore({name: 'userInfo'}).userId;
          this.form["orderName"]=getStore({name: 'userInfo'}).userName;
          if (this.form["orderNum"]==undefined || this.form["orderNum"]==0 || this.form["orderNum"]==null){
            this.$message.error("请填写有效数量");
            return;
          }
          if (this.form["packing"]==undefined || this.form["packing"]==null){
            this.$message.error("请选择包装方式");
            return;
          }
          var offsetY=0;
          var offsetX=0;
          var dom;
          if(this.shopcarnum>0){
            dom = document.getElementsByClassName('shopcaris');
            offsetY = dom[0].clientHeight;
            offsetX = dom[0].offsetLeft;
          }else{
            dom = document.getElementsByClassName('shopcar');
            offsetY = dom[0].clientHeight;
            offsetX = dom[0].offsetLeft;
          }
          const dom2 = document.getElementById('linner_ball'+vegetablesId);
          const offsetY2 = dom2.clientHeight;
          const offsetX2 = dom2.offsetLeft;
          const offx= offsetX-offsetX2;
          const offy=offsetY+offsetY2;
          dom2.style.transform = `translate3d(0px,${offy}px, 0)`;
          dom2.style.opacity = `1`;
          setTimeout(function(){
            dom2.style=`opacity:0;transform:translate3d(0px,${offy}px, 0)`; 
          },300);
          setTimeout(function(){
            dom2.style=`opacity:0;transform:translate3d(0px, 0px, 0)`;
          },1000);
          this.form["weight"]=this.form.orderNum *this.weight;
          this.form["price"]=this.form.orderNum *this.price;
          addshopcar(Object.assign(this.form, this.query)).then(res=>{
              if(res.data.code==0){
                this.$message.error(res.data.msg);  
              }else{
                this.getshopcarfun();
              }
          })
         }
       }
}

</script>

<style>
  .shopcarmx{
    width: 60% !important;
    height: 30vh !important;
    overflow: hidden;
    overflow-y: auto;
}
.el-tabs__nav-scroll .el-tabs__nav.is-left{
    height:90vh !important;
    overflow-y:auto;
    overflow-x:hidden;
  }
</style>

<style scoped>
.totalweight{
  /* position: relative; */
    display: block;
    top: -44px;
    left: -233px;
    font-size: 20px;
}
.packtype{
  /* position: relative; */
    display: block;
    top: -62px;
    left: -127px;
    font-size: 15px;
}
.adddelete{
  /* position: relative; */
    right: 0%;
    display: inline-block;
    font-size: 25px;
    top: 43%;
    width: 30%;
}
.moneyprice{
  /* position: relative; */
  top: -4px;
    font-size: 30px;
    display: block;
    color: red;
    left: -460px
}
ul li{
  list-style:none；
}
.vage{
  /* position: relative; */
  top: -100px;
    font-size: 25px;
    display: block;
    list-style:none；
}
.num{
  /* position: relative; */
  top: -80px;
  left: -73px;
    font-size: 15px;
    display: block;
}
#box1{
   display: inline-block !important;
}
.weight{
  font-size: 25px;
  position: relative;
  top: 15px;
  left: -20px;
  color: hwb(60 0% 0% / 0.59);
}
.card{
  position: relative;
  top: -300px;
  left: 25px;
  display: inline-block;
  width: 85%;
  padding: 10px !important;
  border-radius: 50px;
  background-color:#242424;
  margin: 10px 0 0 95px;
}
.cardis{
  width: 80% !important;
  border-top-right-radius: 0%;
  border-bottom-right-radius: 0%;
}
.add{
  color: red;
  font-weight: bold;
}
.money{
  font-size: 25px;
  position: relative;
  top: -6px;
  left: 15px;
  color: white;
}
/* 应用于嵌套元素的规则 */
.linner_ball{
  /* position: relative;
  top: -30px;
  left: 100px; */
  transition: all 0.3s ease-in-out;
  opacity: 0;
  /* display: inline-block; */
}
  .shopcar{
    font-size: 50px;
    color: #959595;
    margin-left: 10px;
  }
  .shopcaris{
    color: #ffff00 !important;
  }
  .downjt{
    margin-top: 10px;
    display: none;
  }
  .upjt{
    margin-top: 10px;
  }
  .detail{
    /* position: relative;
    left: 72%; */
    float: right;
    margin-top: 10px;
    font-size: 15px;
    color: #ffff00 !important;
  }
  .sureorder{
    position: relative;
    top: -300px;
    left: 24px;
    display: inline-block;
    /* right: 7%; */
    height: 72px;
    line-height: 72px;
    width: 121px;
    border-top-right-radius: 43%;
    border-bottom-right-radius: 43%;
    background-color: #ffff00;
    text-align: center;
    cursor: pointer;
  }

</style>